<template>
  <header>
    <nav-bar transparent virtual/>
    <home-banner />
  </header>
  <main>
    <div class="banner-section">
      <channel-list />
      <center-section />
      <div class="mb-10"></div>
      <CourseCollection />
      <HotRanking />
      <AppRecommendations />
      <!-- <AppFooter /> -->
      <!-- <main-section /> -->
    </div>
    <!-- <AppFooter />  -->
  </main>
</template>

<script setup lang="ts">
import HomeBanner from './banner/index.vue'
import ChannelList from './channel/index.vue'
import CenterSection from './center/index.vue';
import MainSection from './main/index.vue';
import CourseCollection from './center/CourseCollection.vue';
import HotRanking from './center/HotRanking.vue';
import AppRecommendations from './center/AppRecommendations.vue';
import AppFooter from './center/AppFooter.vue';
</script>

<style scoped lang="scss">
html, body {
  height: 100%;
  overflow: hidden; // 禁止页面级滚动
  margin: 0;
  padding: 0;
}
main {
  // padding: 0 60px;
  width: 100%;
  height: calc(100vh - 165px);
  overflow-y: auto;
}
.banner-section {
  padding: 20px 0 40px;
  background-color: #fff;
}
</style>